import {Fieldset, Flex} from "@mantine/core";
import {NodePort, NodePortProps} from "./NodePort";

const data: NodePortProps[] = [
  {
    sn: 0,
    id: "1/5/1/0",
    rate: "10GE",
    state: "UP",
    module: "QSFP-1310-LC-单模-10km",
    peer: "东直门AR5",
    category: "省内延伸",
  },
  {
    sn: 1,
    id: "1/5/1/1",
    rate: "10GE",
    state: "UP",
    module: "QSFP-1310-LC-单模-10km",
    peer: "广东CR1",
    category: "省际中继",
  },
  {
    sn: 2,
    id: "1/5/1/2",
    rate: "10GE",
    state: "UP",
    module: "QSFP-1310-LC-单模-10km",
    peer: "北京国际1",
    category: "省际中继",
  },
  {
    sn: 3,
    id: "1/5/1/3",
    rate: "10GE",
    state: "UP",
    module: "QSFP-1310-LC-单模-10km",
    peer: "昌平AR17",
    category: "省内延伸",
  },
  {
    sn: 4,
    id: "1/5/1/4",
    rate: "10GE",
    state: "DOWN",
    module: "QSFP-1310-LC-单模-10km",
    peer: "",
    category: "",
  },
  {
    sn: 5,
    id: "1/5/1/5",
    rate: "10GE",
    state: "UP",
    module: "QSFP-1310-LC-单模-10km",
    peer: "北京_N2_BB_5",
    category: "",
  },
  {
    sn: 6,
    id: "1/5/1/6",
    rate: "",
    state: "DOWN",
    module: "",
    peer: "",
    category: "",
  },
  {
    sn: 7,
    id: "1/5/1/7",
    rate: "",
    state: "DOWN",
    module: "",
    peer: "",
    category: "",
  },
];

export const NodeSlot = () => {
  return (
    <>
      <Fieldset legend="母卡名称：CR5DLPUFA060----描述：100G灵活插卡线路处理板(4个子槽位)" p="xs">
        <Flex wrap="wrap">
          <Fieldset legend="子卡1" p="xs" variant="filled">
            <Flex wrap="wrap">
              {data.map((item) => (
                <NodePort key={item.id} port={item} />
              ))}
            </Flex>
          </Fieldset>
          <Fieldset legend="子卡2" p="xs" variant="filled">
            <Flex wrap="wrap">
              {data.slice(0, 2).map((item) => (
                <NodePort key={item.id} port={item} />
              ))}
            </Flex>
          </Fieldset>
          <Fieldset legend="子卡3" p="xs" variant="filled">
            <Flex wrap="wrap">
              {data.slice(1, 5).map((item) => (
                <NodePort key={item.id} port={item} />
              ))}
            </Flex>
          </Fieldset>
          <Fieldset legend="子卡4" p="xs" variant="filled">
            <Flex wrap="wrap">
              {data.slice(4, 6).map((item) => (
                <NodePort key={item.id} port={item} />
              ))}
            </Flex>
          </Fieldset>
        </Flex>
      </Fieldset>
    </>
  );
};
